<template>
	<div class="back_contain_n">
		<!-- 头部搜索 -->
		<div class="Search_Top_Part">
			<div class="search_list">
				<div>
					<div class="input_flex">
						<el-select clearable v-model="queryForm.tabName" placeholder="工序">
							<el-option label="配拌投料" value="配拌投料"></el-option>
							<el-option label="挤塑直切" value="挤塑直切"></el-option>
							<el-option label="U管成型" value="U管成型"></el-option>
							<el-option label="包装" value="包装"></el-option>
						</el-select>
					</div>
					<div class="input_flex">
						<el-input clearable v-model="queryForm.deviceCode" placeholder="设备号"></el-input>
					</div>
					<div class="input_flex">
						<el-select clearable v-model="queryForm.type" placeholder="消毒类型">
							<el-option label="生产" value="1"></el-option>
							<el-option label="维保" value="2"></el-option>
						</el-select>
					</div>
					<div class="input_flex daterange">
						<el-date-picker v-model="time"
										type="daterange"
										range-separator="-"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
			</div>
			<div class="search_bt">
				<span class="zll-search" @click="getSterilizeHistoryList">搜索</span>
				<span class="zll-search-reset" @click="searchReset()">重置</span>
			</div>
		</div>
		<div class="Search_Top_Input">
			<div class="addNew">
				<span class="tai" v-if="hasRole('') " @click="exportPdf"><i class="iconfont icon-PDF"></i> PDF导出</span>
			</div>
		</div>
		<!-- table -->
		<sys-table class="m_table"
				   ref="systable"
				   :isMultipleSelection="false"
				   :tableData="tableData"
				   :tableLoading="tableLoading"
				   :tableHeader="tableHeader"
				   :scopeWidth="120"
				   :backCount="backCount"
				   @getBackData="getSterilizeHistoryList"
				   :isOperate="false"
		>
		</sys-table>
	</div>
</template>

<script>
	import {formatDate} from "@/plugins/formatDate";
	import {Loading} from 'element-ui';
	import {getStore} from "@/plugins/localStore";

	export default {
		data() {
			return {
				queryForm: {
					deviceCode: '',
					tabName: '',
					type: '',
				},
				copyQueryForm:null,
				backCount:0,
				tableLoading:false,
				tableData: [],
				tableHeader: [],
				addDialog: false,
				time:[]
			}
		},
		methods: {
			exportPdf(){
				let self = this;
				if(self.copyQueryForm == null){
					self.$message.warning('请先查询有效的数据');
					return;
				}
				let loadingInstance = Loading.service({
					lock: true,
					text: '正在导出pdf...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				self.copyQueryForm.name = getStore().userName;
				self.$http({
					url: "/jinl/sterilize/exportSterilizeHistoryList",
					method: "post",
					params:self.copyQueryForm
				}).then(resp => {
					loadingInstance.close();
					if (resp.success) {
						let filepath = resp.result;
						window.open(filepath, '_blank');
						return;
					}
					self.$message.error(resp.message);
				});
			},

			getSterilizeHistoryList(startIndex, pageRow) {
				let self = this;
				self.tableLoading = true;
				self.copyQueryForm = null;
				if (this.time && this.time.length == 2) {
					//date类型
					self.queryForm.startTime = formatDate(new Date(self.time[0]), 'yyyy-MM-dd')
					self.queryForm.endTime = formatDate(new Date(self.time[1]), 'yyyy-MM-dd') + ' 23:59:59'
				} else {
					self.$message.warning('请选中查询时间段（时间间隔最多为1年）');
					return;
				}
				let startDate = new Date(self.time[0]);
				let endDate = new Date(self.time[1]);
				if (endDate.getTime() - startDate.getTime() > 365*24*3600*1000){
					self.$message.warning('时间间隔最多为1年');
					return;
				}
				let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0||startIndex == 0) {
					self.$refs.systable.resetPage();
				}
				self.queryForm.startIndex = pageInfo.pageNum;
				self.queryForm.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.queryForm);
				self.copyQueryForm = Object.assign({},param);
				self.$http({
					url: "/jinl/sterilize/getSterilizeHistoryList",
					method: "post",
					params:param
				}).then(resp => {
					if (resp.success) {
						self.tableHeader =  [
							{"columnValue": "deviceCode", "columnName": "设备号" },
							{"columnValue": "sterilizeTypeCn", "columnName": "消毒类型" },
							{"columnValue": "sterilizeWater", "columnName": "消毒液" },
							{"columnValue": "createTimeFt", "columnName": "消毒时间" },
							{"columnValue": "sterilizeUserName", "columnName": "消毒人"},
						]
						self.tableData = resp.result;
						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}
					}
					self.tableLoading = false;
				});
			},

			searchReset() { //重置搜索
				this.time[1] = formatDate(new Date(), 'yyyy-MM-dd');
				let timestamp = new Date().getTime()- 30*24*3600*1000;
				this.time[0] = formatDate(new Date(timestamp), 'yyyy-MM-dd');
				this.queryForm = {
					deviceCode: '',
					tabName: '',
					type: '',
				};
				this.getSterilizeHistoryList();
			},
		},
		created(){
			let self = this;
			self.time[1] = formatDate(new Date(), 'yyyy-MM-dd');
			let timestamp = new Date().getTime()- 30*24*3600*1000;
			self.time[0] = formatDate(new Date(timestamp), 'yyyy-MM-dd');
		},
		mounted() {
			let self = this;
			self.getSterilizeHistoryList();
			self.$eventBus.$on("updateSterilizeList",function () {
				self.getSterilizeHistoryList();
			})
		},
		components: {},
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.search_list {
		display: flex;
		justify-content: space-between;

		.sb_ {
			margin-right: 20px;

			.input_flex {
				width: auto;
				display: flex;
				align-items: center;
			}
		}
	}

	.leftList {
		display: flex;
		margin-bottom: 15px;

		li {
			list-style: none;
			width: 100px;
			height: 30px;
			line-height: 28px;
			border-bottom: 1px solid #fff;
			color: #333;
			text-align: center;
			cursor: pointer;
			margin-bottom: 10px;
			transition: all .5s;
			position: relative;
			display: flex;
			justify-content: center;

			&.active {
				color: #ff9935;
				border-color: #ff9935;
				position: relative;
				font-weight: 600;
				font-size: 14px;
			}
		}
	}
</style>